import React, { useState,useEffect } from 'react';
import {Routes,Route,useNavigate } from 'react-router-dom';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UserOutlined,
    DownOutlined,
    WindowsOutlined
} from '@ant-design/icons';
import Index from '../index/index'
import User from '../user/user'
import FormInput from '../forminput/forminput'
import Star from '../star/star'
import './home.css'
import { Layout, Menu, Button, theme, Dropdown } from 'antd';
const { Header, Sider, Content } = Layout;
function getItem(label, key, icon, children) {
    return {
        key,
        icon,
        children,
        label,
    };
}
const itemMenu = [
    getItem('首页', '/', <WindowsOutlined />),
    getItem('明星管理', 'star1', <UserOutlined />, [
        getItem('明星列表', '/star')
    ]),
    getItem('用户管理', 'user1', <UserOutlined />, [
        getItem('用户列表', '/user')
    ]),
    getItem('表单', 'form1', <UserOutlined />, [
        getItem('表单信息', '/form')
    ])
];
const items = [
    {
        label:"个人中心",
        key: '/user',
    },
    {
        label: '退出登录',
        key: '/login',
    },
];
function Home() {
    const [collapsed, setCollapsed] = useState(false);
    const {token: { colorBgContainer }} = theme.useToken();
    const navigate = useNavigate();
    useEffect(()=>{
        ifLogin()
    })
    const onClick=(e)=>{
        navigate(e.key)
    }
    // 判断是否登录
    const ifLogin=()=>{
        var token=sessionStorage.getItem("token")
        if(!token){
           navigate('/login')
        }
      }
    // 个人中心切换
    const handDropDown=(e)=>{
       if(e.key==="/login"){
        sessionStorage.removeItem("token")
        navigate(e.key)
       }else{
        navigate(e.key)
       }
    }
    const baseUrl=window.location.href
    var selectedKey="";
    if(baseUrl.split('/')[3]===""){
        selectedKey="/"
    }else{
        selectedKey="/"+baseUrl.split('/')[3]
    }
    var openKey=baseUrl.split('/')[3]+'1'
    return (
        <div className='main'>
            <Layout
             style={{minHeight: '100vh'}}
            >    
                <Sider trigger={null} collapsible collapsed={collapsed}>
                    <div className="demo-logo-vertical" style={{width:collapsed ? 60 : 180,height:40,backgroundColor:"#f0f0f0",margin:10}}>
                        <h1 style={{textAlign:'center',paddingTop:5}}>{collapsed ? '后台' : '后台管理系统'}</h1>
                    </div>
                    <Menu
                        theme="dark"
                        mode="inline"
                        defaultOpenKeys={[openKey]}
                        defaultSelectedKeys={[selectedKey]}
                        items={itemMenu}
                        onClick={onClick}
                    />
                </Sider>
                <Layout>
                    <Header
                        style={{
                            padding: 0,
                            background: colorBgContainer,
                        }}
                    >
                       <div className='header'>
                            <Button
                                type="text"
                                icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                                onClick={() => setCollapsed(!collapsed)}
                                style={{
                                    fontSize: '16px',
                                    width: 64,
                                    height: 64,
                                }}
                            />
                           <Dropdown
                                menu={{
                                    items,
                                    onClick:(e)=>{handDropDown(e)}
                                }}
                                trigger={['click']}
                            >
                                <div style={{marginRight:30}}>
                                    <UserOutlined />
                                    <span style={{marginRight:10}}>{sessionStorage.getItem('username')}</span>
                                    <DownOutlined />
                                </div>
                            </Dropdown>
                       </div>
                    </Header>
                    <Content
                        style={{
                            margin: '10px 10px',
                            padding: 10,
                            minHeight: 280,
                            background: colorBgContainer,
                        }}
                    >
                        <Routes>
                            <Route exact path='/' element={<Index/>}></Route>
                            <Route exact path='/user' element={<User/>}></Route>
                            <Route exact path='/form' element={<FormInput/>}></Route>
                            <Route exact path='/star' element={<Star/>}></Route>
                        </Routes>
                    </Content>
                </Layout>
            </Layout>
        </div>
    );
}
export default Home;